<template>
  <div class="echart-part">
    <echart-title :title="para.title"></echart-title>
    <div :id="para.id" class="echart_content" style=""></div>
  </div>
</template>

<script>
  const echarts = require("echarts");
  import echartTitle from '../common/echart-title'
  import {echartsOption} from "./echarts-option-bar";
  import {data} from "./data";

  let myChart;
  export default {
    name: "size-data-bar",
    props: {
      para: {}
    },
    components:{
      echartTitle
    },
    data() {
      return {
        option: echartsOption,
        hours: [],
        countIn: [],
        countOut: [],
        timer: ""
      }
    },
    mounted() {
      this.getData()
    },
    beforeDestroy() {
      if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer); //关闭
      }
    },
    watch: {
    },
    methods: {
      getData() {
        let me=this
        me.option.xAxis.data = ["上海",'西安','北京','深圳'];
        me.option.series[0].data = [10000,9000,12000,8000];
        me.option.series[1].data =[5000,600,7000,3000];
        me.draw();

      },
      draw() {
        let div = document.getElementById(this.para.id)
        if (!myChart || !div.innerHTML) {
          myChart = echarts.init(document.getElementById(this.para.id));
        }
        myChart.setOption(this.option)
        window.addEventListener("resize", () => myChart.resize(), false);
      },
    }
  }
</script>

<style scoped>


</style>
